<template>
  <view class="root">
    <u-radio-group @change="handleRadioChange" v-model="currentHousingManager">
      <view class="content-wrapper">
        <view class="list-item" v-for="(item, index) in housingManagerList" :key="index">
          <view class="t-name-style">
            {{item.helpName}}
          </view>
          <view class="v-item">
            <view class="v-label">角色类型:</view>
            <view class="v-value">{{item.helpPersonTypeText }}</view>
          </view>
          <view class="v-item">
            <view class="v-label">联系电话:</view>
            <view class="v-value">{{item.helpPhone}}</view>
          </view>
          <view class="v-item">
            <view class="v-label">身份证号:</view>
            <view class="v-value">{{encryptIDCard(item.helpIdCard)}}</view>
          </view>
          <view class="v-item">
            <view class="v-label">工作单位:</view>
            <view class="v-value">{{item.orgName}}</view>
          </view>
          <u-line color="#F0F0F0" margin="0 0 23rpx 0"></u-line>
          <view class="radio-wrapper" v-if="routerParams.thisIsResponsible == 1">
            <view class="l-left">
              <u-radio :name="item.id"></u-radio>
              <view class="text">
                {{item.isResponsible === '1' ? '主要负责人' : '设为主要负责人'}}
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-radio-group>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    getAction,
    postAction
  } from '../utils/request';
  import {
    deletePoliceHouseMain,
    selectPoliceHouseMain,
    setisMainId
  } from '@/api/api';
  import {
    getOptionsParams,
    isLoading,
    navBack,
    popup,
    Toast,
    encryptIDCard
  } from '@/utils/util';

  export default {
    data() {
      return {
        housingManagerList: [],
        options: {},
        currentHousingManager: '',
        routerParams: {},
        oldValue: ''
      };
    },
    onLoad(options) {
      this.options = options
      this.routerParams = getOptionsParams(options)
    },
    onShow() {
      this.initPage()
    },
    methods: {
      encryptIDCard,
      initPage() {
        let params = {
          fHouseid: this.options.fHouseid,
        };
        isLoading();
        getAction('/mini/wb/helpinfo/helpInfoByMentalPatientId', {
            mentalPatientId: this.routerParams.id
          })
          .then((res) => {
            this.housingManagerList = res.result
            let isMain = this.housingManagerList.find((item) => item.isResponsible === '1')
            if (isMain) {
              this.currentHousingManager = isMain.id
              this.oldValue = this.currentHousingManager
            }
          })
          .finally(() => {
            isLoading(false)
          })
      },
      handleRadioChange(value) {
        isLoading()
        let params = {
          mentalPatientPersonId: this.routerParams.id,
          helpId: value
        }
        postAction('/mini/wb/helpinfo/setResponsiblePerson', params)
          .then((res) => {
            Toast('操作成功', 'success')
            setTimeout(() => {
              navBack()
            }, 500)
          })
          .finally(() => {
            isLoading(false)
          })
          .catch(() => {
            this.currentHousingManager = this.oldValue
          })
      },
      handleDelete(item) {
        let params = {
          id: item.id
        }
        popup(() => {
          isLoading()
          deletePoliceHouseMain(params)
            .then((res) => {
              Toast('删除成功', 'success')
              this.initPage()
            })
            .finally(() => {
              isLoading(false)
            })
        }, '请确认是否删除当前负责人？')
      }
    },
  };
</script>

<style lang="scss">
  page {
    background: #f9f9f9;
  }
</style>
<style lang="scss" scoped>
  .root {
    .content-wrapper {
      padding: 20rpx;
      width: 100%;
      margin-bottom: 130rpx;

      .list-item {
        margin-bottom: 10rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 35rpx;

        .t-name-style {
          font-weight: bold;
          font-size: 32rpx;
          color: #333333;
          margin-bottom: 20rpx;
        }

        .v-item {
          display: flex;
          margin-bottom: 24rpx;

          .v-label {
            font-weight: 500;
            font-size: 28rpx;
            color: #AAAAAA;
            margin-right: 10rpx;
            flex-shrink: 0;
          }

          .v-value {
            font-weight: bold;
            font-size: 30rpx;
            color: #333333;
          }
        }

        .radio-wrapper {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .l-left {
            display: flex;
            align-items: center;

          }

          .delete {
            font-size: 26rpx;
            color: #AAAAAA;
          }

          .text {
            margin-left: 15rpx;
            font-weight: 500;
            font-size: 26rpx;
            color: #AAAAAA;
          }
        }
      }
    }

    .button-wrapper {
      height: 120rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      align-items: center;
      justify-content: center;
      width: 100%;

      .btn {
        width: 680rpx;
        height: 80rpx;
        background: #EDF7FF;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        border: 1rpx solid #ACCBEC;
        font-weight: 500;
        font-size: 30rpx;
        color: #2488F5;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>